<template>
	<view class="content">
		<view class="describe">
			<text>联系人</text>
			<u-input v-model="value" type="text" :clearable="false" placeholder='请输入联系人姓名'
				placeholder-style="font-size:'28rpx'" :custom-style="inputSty" />
		</view>
		<view class="phoneNumber describe">
			<text>手机号</text>
			<u-input v-model="value1" type="text" :clearable="false" placeholder='请输入联系人手机号码'
				placeholder-style="font-size:'28rpx'" :custom-style="numSty" />
		</view>
		<view class="phoneNumber describe">
			<text>所在地区</text>
			<view class="area">
				<u-input v-model="value2" type="text" :clearable="false" placeholder='省/市/区'
					placeholder-style="font-size:'28rpx'" :custom-style="citySty" />
				<u-icon name="map" style="margin-left: 16rpx;" size="32"></u-icon>
			</view>
		</view>
		<view class="phoneNumber describe">
			<text>详细地址</text>
			<u-input v-model="value3" type="text" :clearable="false" placeholder='请输入小区楼栋/乡村名称等'
				placeholder-style="font-size:'28rpx'" :custom-style="villageSty" />
		</view>
		<u-button :custom-style="customStyle"  @click="faultClick">保存</u-button>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				value1: '',
				value2: '',
				value3: '',
				inputSty: {
					width: '224rpx',
					textAlign:'right'
				},
				numSty: {
					width: '280rpx',
					textAlign:'right'
				},
				citySty: {
					width: '108rpx',
					textAlign:'right'
				},
				villageSty:{
					width: '348rpx',
					textAlign:'right'
				},
				customStyle: {
					fontSize: '32rpx',
					borderRadius: '16rpx',
					background: '#1677FE',
					height: '100rpx',
					margin: '100rpx 55rpx 0rpx',
					color:"#fff"
				},
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 40rpx 24rpx;
		box-sizing: border-box;

		.describe {
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #D8D8D8;
			padding-bottom: 20rpx;
			margin-bottom: 40rpx;
			.area{
				display: flex;
				}
			text {
				display: block;
			}
		}
	}

	.u-input[data-v-fdbb9fe6] {
		flex: 0;
	}

	/deep/.u-add-wrap[data-v-49deb6f2] {
		color: #999;
		font-size: 24rpx;
	}
</style>